<template>
	<view class="tasklist-container">
		<view class="search">
			<!-- <view class="s-type">
				<dean-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" chooseText="优先级" isShowIcon></dean-popover>
			</view> -->
			<dean-popover direction="right" modalLeftPos="6rpx" @select="selectLevel" :btnList="levelList"
				chooseText="优先级"></dean-popover>
			<view class="s-arrow"></view>
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @input="handleInput" @confirm="handleSearch" v-model="searchText" type="text"
					class="search-input" confirm-type="search" placeholder="请输入任务名称">
				<dean-popover ref="deanPopover" modalLeftPos="-100rpx" isShowIcon @select="selectChange" class="pop" :btnList="btnList">
				</dean-popover>
			</view>
		</view>
		<!-- <task-type :overTimeList="overTimeList" :handleList="handleList" :completeList="completeList"
			:abandonList="abandonList" :nostartList="nostartList" :overCompleteList="overCompleteList"></task-type> -->
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" :title="`未开始(${nostartLength})`">
				<task-list v-if="nostartList.length" :taskList="nostartList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="nostartList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" :title="`进行中(${handleLength})`">
				<task-list v-if="handleList.length" :taskList="handleList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="handleList.length >= 10" :status="status1" />
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #1152FC' : ''" :title="`已超时(${overTimeLength})`">
				<task-list v-if="overTimeList.length" :taskList="overTimeList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="overTimeList.length >= 10" :status="status2" />
			</van-tab>
			<van-tab :title-style="active == 3 ? 'color: #1152FC' : ''" :title="`正常完成(${completeLength})`">
				<task-list v-if="completeList.length" :taskList="completeList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="completeList.length >= 10" :status="status3" />
			</van-tab>
			<van-tab :title-style="active == 4 ? 'color: #1152FC' : ''" :title="`超时完成(${overCompleteLength})`">
				<task-list v-if="overCompleteList.length" :taskList="overCompleteList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="overCompleteList.length >= 10" :status="status4" />
			</van-tab>
			<van-tab :title-style="active == 5 ? 'color: #1152FC' : ''" :title="`已废弃(${abandonLength})`">
				<task-list v-if="abandonList.length" :taskList="abandonList"></task-list>
				<view v-else>
					<van-empty description="暂无任务" />
				</view>
				<uni-load-more v-if="abandonList.length >= 10" :status="status5" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import TaskType from '../Components/taskType.vue'
	import TaskList from '@/components/taskList.vue'
	import DeanPopover from '@/components/dean-popover/dean-popover.vue'
	export default {
		components: {
			TaskList,
			DeanPopover,
			TaskType
		},
		data() {
			return {
				nostartLength: 0,
				handleLength: 0,
				overTimeLength: 0,
				completeLength: 0,
				overCompleteLength: 0,
				abandonLength: 0,
				status: 'more',
				status1: 'more',
				status2: 'more',
				status3: 'more',
				status4: 'more',
				status5: 'more',
				haveMoreNoStart: true,
				haveMoreHandle: true,
				haveMoreOver: true,
				haveMoreOverComplete: true,
				haveMoreComplete: true,
				haveMoreAbandon: true,
				timer: '',
				searchText: '',
				btnList: ['全部任务', '普通任务', '巡逻任务', '设备巡检', '品质巡查'],
				levelList: ['全部', '高', '中', '低'],
				params: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 1,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				params1: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 2,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				params2: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 3,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				params3: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 4,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				params4: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 5,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				params5: {
					抄送人id: null,
					小程序创建人id: null,
					执行人id: uni.getStorageSync('userInfo').id,
					任务类型: null,
					任务状态: 6,
					isAll: 1,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "created_at",
						order: 0
					}
				},
				active: 0,
				overTimeList: [],
				handleList: [],
				completeList: [],
				abandonList: [],
				nostartList: [],
				overCompleteList: []
			}
		},
		onLoad(options) {
			if(options.type == 'join') {
				// this.params.抄送人id = uni.getStorageSync('userInfo').id
				// this.params.执行人id = null
				let id = uni.getStorageSync('userInfo').id
				this.setValue('小程序创建人id', id)
				this.setValue('执行人id', null)
			}
			if(options.type == 'create') {
				// this.params.小程序创建人id = uni.getStorageSync('userInfo').id
				// this.params.执行人id = null
				let id = uni.getStorageSync('userInfo').id
				this.setValue('小程序创建人id', id)
				this.setValue('执行人id', null)
			}
				
			if(['2', '3', '4'].includes(options.type)) {
				this.setValue('任务类型', +options.type)
				this.$refs.deanPopover.currentIndex = +options.type
				// console.log('子组件', this.$refs.deanPopover)
			}
		},
		onShow() {
			uni.showLoading()
			this.resetList()
			this.initList()
		},
		onReachBottom() {
			if (this.active === 0 && this.haveMoreTicket) {
				this.status = 'loading'
				this.params.pagination.current += 1
				this.getNoStartList()
				
			} else if (this.active === 1 && this.haveMoreHandle) {
				this.status1 = 'loading'
				this.params1.pagination.current += 1
				this.getHandleList()
				
			} else if(this.active === 2 && this.haveMoreOver) {
				this.status2 = 'loading'
				this.params2.pagination.current += 1
				this.getOverTimeList()
				
			} else if (this.active === 3 && this.haveMoreComplete) {
				this.status3 = 'loading'
				this.params3.pagination.current += 1
				this.getCompleteList()
				
			} else if (this.active === 4 && this.haveMoreOverComplete) {
				this.status4 = 'loading'
				this.params4.pagination.current += 1
				this.getOverCompleteList()
				
			}else if(this.active === 5 && this.haveMoreAbandon) {
				this.status5 = 'loading'
				this.params5.pagination.current += 1
				this.getAbandonList()
			}
		},
		methods: {
			initList() {
				this.getNoStartList()
				this.getHandleList()
				this.getOverTimeList()
				this.getCompleteList()
				this.getOverCompleteList()
				this.getAbandonList()
			},
			handleInput(e) {
				// this.params.任务名称 = e.target.value
				this.setValue('任务名称', e.target.value)
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.resetList()
					this.initList()
				}, 800)
			},
			handleSearch() {
				uni.showLoading()
				this.resetList()
				this.initList()
				// this.getTaskList()
			},
			selectChange(val) {
				uni.showLoading()
				let value = val === 0 ? null : val
				this.setValue('任务类型', value)
				this.resetList()
				this.initList()
			},
			
			selectLevel(val) {
				uni.showLoading()
				let value = val === 0 ? null : 4 - val
				this.setValue('任务优先级', value)
				this.resetList()
				this.initList()
			},
			changeTab(name) {
				this.active = name.target.index
			},
			resetList() {
				this.nostartList = []
				this.handleList = []
				this.overTimeList = []
				this.completeList = []
				this.overCompleteList = []
				this.abandonList = []
			},
			setValue(key, value) {
				this.params[key] = value
				this.params1[key] = value
				this.params2[key] = value
				this.params3[key] = value
				this.params4[key] = value
				this.params5[key] = value
			},
			getNoStartList() {
				this.$http.post('taskSystem/task/list', this.params).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.nostartLength = res.data.total
						res.data.list = res.data.list || []
						this.nostartList = [...this.nostartList, ...res.data.list]
						if(this.nostartList.length >= res.data.total) {
							this.haveMoreNoStart = false
							this.status = 'noMore'
						}
					}
				})
			},
			getHandleList() {
				this.$http.post('taskSystem/task/list', this.params1).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.handleLength = res.data.total
						res.data.list = res.data.list || []
						this.handleList = [...this.handleList, ...res.data.list]
						if(this.handleList.length >= res.data.total) {
							this.haveMoreHandle = false
							this.status1 = 'noMore'
						}
					}
				})
			},
			getOverTimeList() {
				this.$http.post('taskSystem/task/list', this.params2).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.overTimeLength = res.data.total
						res.data.list = res.data.list || []
						this.overTimeList = [...this.overTimeList, ...res.data.list]
						if(this.overTimeList.length >= res.data.total) {
							this.haveMoreOver= false
							this.status2 = 'noMore'
						}
					}
				})
			},
			getCompleteList() {
				this.$http.post('taskSystem/task/list', this.params3).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.completeLength = res.data.total
						res.data.list = res.data.list || []
						this.completeList = [...this.completeList, ...res.data.list]
						if(this.completeList.length >= res.data.total) {
							this.haveMoreComplete= false
							this.status3 = 'noMore'
						}
					}
				})
			},
			getOverCompleteList() {
				this.$http.post('taskSystem/task/list', this.params4).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.overCompleteLength = res.data.total
						res.data.list = res.data.list || []
						this.overCompleteList = [...this.overCompleteList, ...res.data.list]
						if(this.overCompleteList.length >= res.data.total) {
							this.haveMoreOverComplete= false
							this.status4 = 'noMore'
						}
					}
				})
			},
			getAbandonList() {
				this.$http.post('taskSystem/task/list', this.params5).then(res => {
					if (res.code === 10000) {
						console.log(res)
						this.abandonLength = res.data.total
						res.data.list = res.data.list || []
						this.abandonList = [...this.abandonList, ...res.data.list]
						if(this.abandonList.length >= res.data.total) {
							this.haveMoreAbandon = false
							this.status5 = 'noMore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tasklist-container {
		background-color: #f5f5f5;
	}

	.van-empty {
		background-color: #fff;
	}

	.van-ellipsis {
		flex-basis: 25% !important;
	}

	.search {
		// margin-left: 100rpx;
		width: 750rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		.s-arrow {
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #3699FF;
			border-right: 2rpx solid #3699FF;
			transform: rotate(135deg);
			margin-left: 10rpx;
			margin-top: -4rpx;
		}

		.search-box {
			width: 440rpx;
			height: 56rpx;
			margin-left: 20rpx;
			padding-left: 17rpx;
			padding-right: 20rpx;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;

			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.search-input {
				flex: 1;
				height: 100%;
				color: #999;
			}

			.pop {
				position: absolute;
				right: 60rpx;
			}
		}
	}
</style>
